<template>
    <div class="newsDetail-container">
        <div class="news-main">     
            <!-- 轮播图 -->
            <div class="newsDetail-img">
                <el-carousel height="350px">
                    <el-carousel-item v-for="item in items" :key="item.id">
                        <img :src="item.imgSrc" class="carousel_image_type" >
                    </el-carousel-item>
                </el-carousel>
            </div>

            <div class="newsDetail-text">
                <!-- news标题 -->
                <div class="news-title">
                    {{newsData.title}}
                </div>
                <div class="news-content" v-html="newsData.describes">
                </div>
                <div class="collectButtons">
                    <el-button round @click="addCollection()">收藏商品</el-button>
                    <el-button type="primary" round>联系卖主</el-button>    
                </div>
                <div class="collectSum">已有{{collectedUsers}}人收藏了呦！！</div> 
            </div> 
        </div>
        <!--帖子评论区 START-->
        <div class="news-comment">
            <!-- 评论输入框 -->
            <div class="comment-input">
                <transition name="fade">
                    <div class="input-wrapper">
                        <el-input class="gray-bg-input"
                                v-model="commentValue"
                                type="textarea"
                                :rows="3"
                                autofocus
                                placeholder="写下你的评论">
                        </el-input>
                        <div class="btn-control">
                            <!-- <span round class="cancel" @click="commentValue=''">重置</span> -->
                            <el-button  round @click="commentValue=''">清除</el-button>
                            <el-button  round type="primary" @click="commitComment">发送</el-button>
                        </div>
                    </div>
                </transition>
            </div>
            <!-- 评论列表 -->
            <div class="comment-main">
                <NewsComment :comments="commentData"></NewsComment>
            </div>
        </div>
        <!--帖子评论区 END-->
    </div>
</template>

<script>
import NewsComment from './news-comment'
import axios from 'axios';
import { mapState } from 'vuex';
export default {
    name:'newsDetail',
    data(){
        return {
            newsData:{},
            collectedUsers:0,
            //轮播样图
            items:[
                {
                    id:0,
                    imgSrc:require("../../assets/pic/itemsImg/1.jpg")
                },
                {
                    id:1,
                    imgSrc:require("../../assets/pic/itemsImg/2.jpg")
                },
                {
                    id:2,
                    imgSrc:require("../../assets/pic/itemsImg/3.jpg")
                },
                {
                    id:3,
                    imgSrc:require("../../assets/pic/itemsImg/4.jpg")
                }
            ],
            commentData: [],
            commentValue:''
        }
    },
    components:{
        NewsComment
    },
    computed:{
        ...mapState(['user','showUserDialog','islogin'])
    },
    mounted(){
        this.getNewsInfo();
        this.getCollectorNum();
        this.getNewsComments();
    },
    methods:{
        getNewsInfo(){
            axios.post('/api/getNewsDetail',{
                id:this.$route.params.id
            }).then(res =>{
                this.newsData = res.data[0];
                console.log(this.newsData)
            })
        },
        getCollectorNum(){
            axios.post('/api/getCollectedUsers',{
                //发送商品id
                id:this.$route.params.id
            }).then(res =>{
                this.collectedUsers = res.data.length;
            })
        },
        getNewsComments(){
            axios.post('/api/getNewsComments',{
                id:this.$route.params.id
            }).then(res =>{
                this.commentData = res.data;
                console.log(this.commentData)
            })
        },
        addCollection(){
            //未登录的状态
            if(!this.$store.state.isLogin){
                this.$message({
                    message: '请登录后再收藏！！',
                    type: 'warning',
                });
            }else{
                axios.post('/api/addCollection',{
                    //发送商品的id与用户id
                    pid:this.$route.params.id,
                    uid:this.$store.state.user.id
                }).then(res =>{
                    console.log(res.data)
                    if(!res.data) { 
                        this.$message.error(res.data.msg + '收藏失败了！！')
                    }else if(typeof(res.data) === "string"){ 
                        this.$message({
                            message: res.data,
                            type: 'warning',
                        });
                    }else{
                        this.$message({
                            message: '收藏成功了！',
                            type: 'success',
                        });
                        // 重新刷新一下收藏人数
                        this.getCollectorNum() 
                    }
                })
            }
        },
        //提交评论
        commitComment() {
            if (!this.commentValue){
                this.$message.error('请输入你的评论喔~')
            } else if(!this.user.id){
                this.$message.error('请登录后再评论喔~')
            }else{
                axios.post('/api/addComments',{
                    author:this.user.username,
                    content:this.commentValue,
                    id:this.$route.params.id
                }).then(res=>{
                    if(res.data !== false){
                        this.$message({
                        type:'success',
                        message:'评论成功！'
                        })
                    }
                    this.$router.go(0);
                })
            }
        }
    }
}
</script>

<style lang = "scss" scoped>
.newsDetail-container{
    margin: 0 auto;
    padding: 10px 0;
    position: relative;
    .news-main{
        width: 80%;
        /* height: ; */
        margin: 0 auto;
        padding: 35px 0;
        display: flex;
        flex-direction: row;
        justify-content: center;
        .newsDetail-img{
            width: 50%;
            height: 50%;
            .carousel_image_type{
                width: 100%;
            }
        }
        .newsDetail-text{
            padding: 0 25px;
            .news-title {
                font-size: 22px;
                font-weight:bold;
            }
            .news-content{
                padding: 40px 0 100px 0;
            }
            .collectSum{
                padding: 20px;
                font-size: 12px;
                font-weight:bold;
            }
        }
    }
    .news-comment{
        margin-top: 10px;
        padding: 0 15px;
        .comment-input{
            width: 66.5%;
            margin: 0 auto;
            padding-bottom: 30px;
            border-bottom: 1px solid #d2d2d2;
            .input-wrapper {
                padding: 10px;
                .gray-bg-input, .el-input__inner {
                /*background-color: #67C23A;*/
                }
                .btn-control {
                    display: flex;
                    justify-content: flex-end;
                    align-items: center;
                    padding-top: 10px;
                    .confirm {
                        font-size: 16px;
                    }
                }
            }
        }
        .comment-main{
           margin: 40px 17%;
        }
    }
}
</style>